/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useChartTaskTypeFetch } from '@hooks/useTaskType'
/* model */
import { ChartTaskType } from '@model/param/out/Chart'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, onMounted, Ref, ref } from 'vue'
import { CommonComponentInstance } from '@model/VC'
/* util */
import { isEmpty } from '@src/util/type'

type HandlerTaskTypeChangeFunctionType = (value: string[]) => void;

interface ChartTaskTypeSelectSetupState {
  // 获取图表工单类型列表
  fetchChartTaskTypes: VoidFunction;
  // 工单类型列表改变事件
  handlerTaskTypeChange: HandlerTaskTypeChangeFunctionType
  // 图表工单类型列表
  taskTypeList: Ref<ChartTaskType[]>;
}

enum ChartTaskTypeSelectEventEnum {
  Input = 'input'
}

export type ChartTaskTypeSelectProps = {
  // 工单类型id
  value: string;
}
export type ChartTaskTypeSelectInstance = ComponentInstance & ChartTaskTypeSelectSetupState
export type ChartTaskTypeSelectVM = ComponentRenderProxy<ChartTaskTypeSelectProps> & CommonComponentInstance

export type ChartSelectTaskType = {
  label: string;
  value: string;
}

// 工单列表数据(外部)
let OutsideTaskTypeList: Ref<ChartSelectTaskType[]>

export default defineComponent<ChartTaskTypeSelectProps, ChartTaskTypeSelectSetupState>({
  name: ComponentNameEnum.ChartTaskTypeSelect,
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  setup(props: ChartTaskTypeSelectProps, { emit }) {
    // 远端工单类型列表数据
    let originTaskTypeListValue: Ref<ChartTaskType> = ref({})
    // 工单类型列表数据 (内部)
    let taskTypeList: Ref<ChartSelectTaskType[]> = ref([])
    
    /**
     * @description: 获取工单类型列表
     */
    const fetchChartTaskTypes: VoidFunction = async () => {
      // 优先获取外部存在的工单类型列表
      if (!isEmpty(OutsideTaskTypeList)) {
        taskTypeList.value = OutsideTaskTypeList.value
        return
      }
      
      originTaskTypeListValue = await useChartTaskTypeFetch()
      let chartSelectTaskTypes: ChartSelectTaskType[] = []
      
      for(let key in originTaskTypeListValue.value) {
        chartSelectTaskTypes.push({
          value: key,
          label: originTaskTypeListValue.value[key]
        })
      }
      
      taskTypeList.value = chartSelectTaskTypes
      OutsideTaskTypeList = taskTypeList
    }
    
    /** 
     * @description: 工单类型列表改变事件
    */
    const handlerTaskTypeChange: HandlerTaskTypeChangeFunctionType = (value: string[]) => {
      emit(ChartTaskTypeSelectEventEnum.Input, value)
    }
    
    onMounted(() => {
      fetchChartTaskTypes()
    })
    
    return {
      fetchChartTaskTypes,
      handlerTaskTypeChange,
      taskTypeList
    }
  },
  render() {
    return (
      <el-select
        value={this.value} 
        multiple
        clearable 
        collapse-tags
        placeholder="请选择工单类型" 
        class="task-span"
        onInput={this.handlerTaskTypeChange}
      >
        {
          this.taskTypeList.map((taskType: ChartTaskType) => {
            return (
              <el-option
                key={taskType.value}
                label={taskType.label}
                value={taskType.value}
              >
              </el-option>
            )
          })
        }
        </el-select>
    )
  }
})
